<template>
  <div class="layout-padding">
    <el-form inline :model="state.query">
      <el-form-item label="菜单名称">
        <el-input
          v-model="state.query.keyword"
          placeholder="请输入菜单名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="queryData()" icon="ele-Search" type="primary"
          >查询</el-button
        >
        <el-button @click="handleAdd('add')" icon="ele-Plus" type="success"
          >新增菜单</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      class="menu-table"
      :data="state.tableList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column
        prop="meta.title"
        label="菜单名称"
        header-align="center"
        align="left"
      >
        <template #default="{ row }">
          <div style="display: flex; align-items: center">
            <SvgIcon :name="row.meta.icon"></SvgIcon>
            <span class="ml10">{{ row.meta?.title }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="path"
        label="组件地址"
        header-align="center"
        align="left"
      />
      <el-table-column
        prop="component"
        label="组件路径"
        header-align="center"
        align="left"
      />
      <el-table-column
        prop="code"
        label="权限标识"
        header-align="center"
        align="left"
      />
      <el-table-column prop="type" label="类型" align="center" width="100">
        <template #default="{ row }">
          <el-tag effect="plain" :type="row.type == 1 ? null : 'success'">{{
            row.type == 1 ? "菜单" : "按钮"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center" />
      <el-table-column prop="component" label="操作" width="240">
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="ele-Plus"
            link
            @click.stop="handleAdd('add', row.id)"
            >新增下级</el-button
          >
          <el-button
            type="warning"
            link
            icon="ele-Edit"
            @click.stop="handleEdit('edit', row)"
            >修改</el-button
          >
          <el-popconfirm
            @confirm="handleDelete(row.id)"
            width="auto"
            :title="`确定永久删除【${row.meta?.title}】吗？`"
          >
            <template #reference>
              <el-button type="danger" link icon="ele-Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增，编辑菜单 -->
    <!-- 新增、编辑弹出组件 -->
    <MenuEdit ref="editRef" @refresh="queryData"/>
  </div>
</template>

<script lang="ts" setup name="SystemMenu">
import { ref, onMounted, reactive, toRefs } from "vue";
import { getList, deleteMenu } from "@/api/System/menu";
import { ElNotification } from "element-plus";
import MenuEdit from "./components/menu-edit.vue";

const state = reactive({
  query: {
    keyword: "",
  } as SysMenuQuery,
  tableList: [] as SysMenuType[], //菜单表格数据
});
const editRef = ref();
onMounted(() => {
  queryData(state.query);
});
const handleAdd = (status: string, id) => {
  editRef.value.open(status, id);
};
const handleEdit = (status: string, row) => {
  editRef.value.open(status, row);
};
const handleDelete = async (id) => {
  const res = await deleteMenu(id);
  if (res.code === 200) {
    ElNotification.success({
      message: "删除成功",
    });
  }
};
// 搜索菜单表格
const queryData = async() => {
 const res = await getList(state.query)
 if(res.code === 200){
  state.tableList = res.data
 }
 
};
</script>
<style lang="scss" scoped>
::v-deep .menu-table {
  .cell {
    display: flex;
    align-items: center;
  }
}
</style>
